<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1_认识vm</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">
      <p>Message: <span>{{ message }}</span></p>
    </div>
  </body>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    const data = {
      message: "Hello",
      name: "Tom",
      _abc: "xyz"
    };
    const vm = new Vue({
      el: "#app",
      data() {
        return data;
      },
    });
    console.log(vm);
    // 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
    // Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。
    // Vue 实例也代理了 data 对象上所有的 property，因此访问 vm.message 等价于访问 vm.$data.message。
    console.log(vm.$data.message);
    console.log(vm.message);
    console.log(vm.$data == data); // true
    // 以 _ 或 $ 开头的 property 不会被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突

    vm.b = "abc"
    // 值得注意的是，如果在创建完 Vue 实例后，再对去添加一个新的 property ，那么 该 property 的改动并不会触发任何视图的刷新。
  </script>
</html>
